<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        {{ reversedMessage  }}
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    //可以将模板中复杂的计算逻辑 平移 到计算属性中
    Vue.config.productionTip = false;

    new Vue({
        el:"#app",
        data:{
            message: 'Hello'
        },
        computed:{
            //语法糖
            /*reversedMessage(){
                //进行复杂的逻辑计算
                //当计算属性的依赖产生变化时;对应的计算属性也会得到更新
                console.log("计算属性")
                return this.message.split("").reverse().join("-")
            }*/

            reversedMessage:{
                get(){
                    console.log("计算属性 get")
                    return this.message.split("").reverse().join("-")
                }
            }
        }
    })
</script>
</html>